<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import bigImg from "@/components/public/bigImg.vue";

import {
  EnterpriseDetail,
  EnterpriseUserAccount,
  EnterprisePayRecord,
  EnterpriseCoinRecord,
  checkStaffStatus,
} from "@/http/api";
export default {
  components: { outMain, bigImg },
  name: "",
  data() {
    return {
      filesArr: [],
      detailId: this.$route.query.id,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "员工账号", id: 2 },
        { name: "充值记录", id: 3 },
        { name: "鲸币记录", id: 4 },
      ],
      stepId: 1,
      formData: {},
      queryData: {
        enterprise_id: this.$route.query.id,
        page: 1,
        per_page: 10,
      },
      tableData: [],
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 2) {
        this.getUserList();
      } else if (this.stepId === 3) {
        this.getPayFn();
      } else if (this.stepId === 4) {
        this.getCoinFn();
      }
    },
    async getUserList() {
      const { data } = await EnterpriseUserAccount(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getCoinFn() {
      const { data } = await EnterpriseCoinRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getPayFn() {
      const { data } = await EnterprisePayRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    questCheck(data) {
      checkStaffStatus(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          this.getUserList();
        }
      });
    },
    checkStatus(row, type) {
      if (type == 1) {
        ElMessageBox.confirm("确定恢复选择的员工账号吗?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let data = {
            staff_id: row.staff_id,
            staff_status: type,
          };
          this.questCheck(data);
        });
      } else {
        ElMessageBox.prompt("确定禁用选择的员工账号吗?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then((value) => {
          let data = {
            staff_id: row.staff_id,
            staff_status: type,
            jy_reason: value.value,
          };
          this.questCheck(data);
        });
      }
    },
    getData() {
      EnterpriseDetail({ enterprise_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          if (res.data.data.enterprise_file) {
            this.filesArr = res.data.data.enterprise_file.split(",");
            console.log(this.filesArr);
          }
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>企业账号详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">账号编号</div>
                  <div class="desText">{{ formData.enterprise_number }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">企业名称</div>
                  <div class="desText">{{ formData.enterprise_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">负责人</div>
                  <div class="desText">{{ formData.enterprise_person }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.enterprise_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">账号状态</div>
                  <div class="desText">
                    <el-tag v-if="formData.enterprise_status == 1">正常</el-tag>
                    <el-tag type="danger" v-if="formData.enterprise_status == 2"
                      >禁用</el-tag
                    >
                    <el-tag type="info" v-if="formData.enterprise_status == 3"
                      >已到期</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">员工账号</div>
                  <div class="desText">{{ formData.staff_sum }}(个)</div>
                </div>
                <div class="desItem">
                  <div class="desName">账户鲸币</div>
                  <div class="desText">{{ formData.jlh_coin }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">开户金额</div>
                  <div class="desText">{{ formData.account_money }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">充值金额</div>
                  <div class="desText">{{ formData.cz_money }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">剩余精准简历</div>
                  <div class="desText">
                    {{ formData.resume_capture_sum }}(次)
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">备注信息</div>
                  <div class="desText">
                    {{
                      formData.enterprise_remark
                        ? formData.enterprise_remark
                        : "- -"
                    }}
                  </div>
                </div>

                <div class="desItem" v-if="formData.staff_status == 2">
                  <div class="desName">禁用原因</div>
                  <div class="desText">{{ formData.jy_reason }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">到期时间</div>
                  <div class="desText">{{ formData.expiration_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">最近登录时间</div>
                  <div class="desText">{{ formData.lastlogin_time }}</div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="filesArr.length > 0">
              <div class="desTitle">附件资料</div>
              <div class="desCont">
                <div class="desItem">
                  <bigImg :propImg="filesArr" :src="filesArr[0]"></bigImg>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">员工账号（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="staff_user_mobile"
                  show-overflow-tooltip
                  label="账号"
                />
                <el-table-column
                  prop="staff_user_name"
                  show-overflow-tooltip
                  label="姓名"
                />
                <el-table-column
                  prop="comType"
                  show-overflow-tooltip
                  label="状态"
                >
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag v-if="row.staff_status == 1">正常</el-tag>
                      <el-tag type="danger" v-if="row.staff_status == 2"
                        >禁用</el-tag
                      >
                      <el-tag type="info" v-if="row.staff_status == 3"
                        >已到期</el-tag
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="jy_reason"
                  show-overflow-tooltip
                  label="禁用原因"
                />
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
                <el-table-column
                  prop="expiration_time"
                  show-overflow-tooltip
                  label="到期时间"
                />

                <el-table-column prop="Name" width="60" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="blueText ctrlText"
                        @click="checkStatus(row, 1)"
                        v-if="row.staff_status == 2"
                      >
                        恢复
                      </div>
                      <div
                        v-if="row.staff_status == 1"
                        @click="checkStatus(row, 2)"
                        class="redText ctrlText"
                      >
                        禁用
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">充值记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="order_number"
                  width="220"
                  show-overflow-tooltip
                  label="订单号"
                />
                <el-table-column
                  prop="pay_money"
                  width="150"
                  show-overflow-tooltip
                  label="支付金额"
                >
                  <template #default="{ row }"
                    >{{ row.pay_money }}（元）</template
                  >
                </el-table-column>
                <el-table-column
                  prop="msg"
                  show-overflow-tooltip
                  label="充值内容"
                />
                <el-table-column
                  width="200"
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 4">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">鲸币记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="order_number"
                  width="220"
                  show-overflow-tooltip
                  label="单号"
                />
                <el-table-column
                  prop="coin"
                  width="100"
                  show-overflow-tooltip
                  label="充值/消费"
                >
                  <template #default="{ row }">
                    <span class="greenText" v-if="row.type == 1"
                      >+{{ row.coin }}</span
                    >
                    <span class="redText" v-if="row.type == 2"
                      >-{{ row.coin }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  prop="change_coin"
                  show-overflow-tooltip
                  label="剩余鲸币"
                />
                <el-table-column width="100" show-overflow-tooltip label="类型">
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag v-if="row.type == 1">充值</el-tag>
                      <el-tag type="danger" v-if="row.type == 2">消费</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="msg"
                  show-overflow-tooltip
                  label="说明"
                />

                <el-table-column
                  width="200"
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
